<template>
	<!-- 顶部导航 -->
	<view class="navbar">
        <up-navbar
            title="账号与安全"
        >
        </up-navbar>
	</view>
	<!-- 安全等级 -->
	<view class="grade">
		<view class="safe">
			<img src="@/static/icon/security_f.svg" class="safeimg"/>
			<view class="gradeSize">安全等级：{{grade[0].size}}</view>
		</view>
	</view>
	<view class="wenzi">
		<p>通过以下设置可提高安全等级</p>
	</view>
	<!-- 单元格列表 -->
	<view class="cell">
		<up-cell-group>
			<up-cell
			v-for="(item,index) in cellList"
			:key="item.id"
			:title="item.title" 
			:titleStyle="{ fontSize: '30rpx',fontWeight:'100'}"
			:url="item.url"
			>
				<template #icon>
					<img :src="item.icon" class="img">
				</template>
				<template #value
				:class="{isBand: item.isBand}"
				>
					{{item.isBand ? '已绑定' : item.value}}
				</template>
				<template #right-icon>
					<up-icon size="20" name="arrow-right"></up-icon>
				</template>
			</up-cell>
			<up-cell
			title="登录保护" 
			:titleStyle="{ fontSize: '30rpx',fontWeight:'100'}"
			:isLink="true"
			>
				<template #icon>
					<img src="@/static/icon/protection.png" class="img"/>
				</template>
				<template #value
					:class="{isBand: 'isBand'}"
				>
					{{isBand ? '已开启' : '未开启'}}
				</template>
				<template #right-icon>
					<up-icon size="20" name="arrow-right"></up-icon>
				</template>
			</up-cell>
			<up-cell
			title="账号注销" 
			:titleStyle="{ fontSize: '30rpx',fontWeight:'100'}"
			url="pages/safe/authentication"
			>
				<template #icon>
					<img src="@/static/icon/logout.png" class="img"/>
				</template>
				<template #right-icon>
					<up-icon size="20" name="arrow-right"></up-icon>
				</template>
			</up-cell>
		</up-cell-group>
	</view>
	<!-- 账号绑定 -->
	<view class="wenzi">
		<p>账号绑定</p>
	</view>
	<up-cell
	v-for="(item,index) in cellList2"
	:key="index"
	:title="item.title"
	:titleStyle="{ fontSize: '30rpx',fontWeight:'100'}"
	:isLink="true"
	>
		<template #icon>
			<img :src="item.icon" class="img"/>
		</template>
		<template #value
		:class="{isBand: item.isBand}"
		>
			{{item.isBand ? '已绑定' : item.value}}
		</template>
		<template #right-icon>
			<up-icon size="20" name="arrow-right"></up-icon>
		</template>
	</up-cell>
</template>
<script setup>
import {ref} from 'vue'
import sounding from '@/static/icon/sounding.png'
import phone from '@/static/icon/phone.png'
import idcard from '@/static/icon/idcard.png'
import protection from '@/static/icon/protection.png'
import logout from '@/static/icon/logout.png'
import aliyun from '@/static/icon/aliyun.png'
// 安全等级模拟数据
const grade = ref([
	{id:1,size:"高"},
	{id:2,size:"中"},
	{id:3,size:"低"}
])
// 控制登录保护单独是否绑定和开启
const isBand = ref(true)
// 单元格循环数据
const cellList = ref([
	{id:1,title:"密码修改",isBand:false,value:"设置密码",icon:sounding,url:"/pages/safe/password"},
	{id:2,title:"手机绑定",isBand:false,value:"未绑定",icon:phone,url:"/pages/safe/password"},
	{id:3,title:"证件信息",isBand:false,value:"未绑定",icon:idcard,url:"/pages/safe/renzheng"},
])
const cellList2 = ref([
	{id:1,title:"支付宝",isBand:false,value:"未绑定",icon:aliyun}
])

// 跳转页面
const jump = (item) => {
	if (item.name == "密码修改") {
		uin.navigateTo({
			url:item.url,
		})
	}
	return;
}

</script>

<style lang="scss">
.navbar {
	width: 100%;
	height: 88rpx;
}
.grade {
	height: 350rpx;
	text-align: center;
}
.safe {
	width: 200rpx;
	height: 150rpx;
	display:inline-block;
}
.safeimg{
	width: 100rpx;
	height: 100rpx;
	margin: 40rpx 0 20rpx;
}
.img {
	width: 32rpx;
	height: 32rpx;
}
.icon {
	
}
.wenzi {
	height: 90rpx;
	line-height: 90rpx;
	font-size: 25rpx;
	font-weight: 0;
	color: #949494;
	background-color: #f5f5f5;
	padding-left: 30rpx;
}
// 更改颜色
.isBand {
	color: blue 
}

</style>
